<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据可视化demo</title>
    <link href="../styles/common.css" rel="stylesheet">
    <script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="../scripts/Plugin/echarts.min.js"></script>
    <script src="../scripts/common.js"></script>
    <script src="../scripts/video_top_play_count.js"></script>
    <script src="../scripts/include.js"></script>
</head>
<body>
<!--顶部-->
<header class="header left">
    <include src="head.html"></include>
</header>
<!--内容部分-->
<div class="con left" style="width:50%;">
    <!--统计分析图-->
    <div class="div_any">
        <div class="left div_any01" style="width:100%;">
            <div class="div_any_child" style="width:98%;position:relative;height: 420px;">
                <div class="div_any_title"><img src="../images/title_13.png">主要传染病</div>
                <div id="histogramChart1"
                     style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
                <div id="lineChart1" style="width: 52%;height: 66%;display: inline-block;"></div>
                <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: 2%;top: 8%;">
                    <div style="display: inline-block;width:33%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">病例报告数</div>
                        <div style="color:#87cefa;font-size: 30px;line-height: 42px;">2354</div>
                    </div>
                    <div style="display: inline-block;width:33%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">死亡数</div>
                        <div style="color:red;font-size: 30px;line-height: 42px;">26</div>
                    </div>
                    <div style="display: inline-block;width:33%;text-align:center;">
                        <div style="color:#fff;font-size: 18px;line-height: 32px;">同比发病数趋势</div>
                        <div style="color:#ff7f50;font-size: 30px;line-height: 42px;">5.36%</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="left div_any01" style="width:48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_14.png">主要症状</div>
                <p id="histogramChart2" class="p_chart" style="height: 400px;"></p>

            </div>
        </div>
        <div class="left div_table_box" style="width: 48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_16.png">预警信息</div>
                <div class="table_p">
                    <table>
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>内容</th>
                            <th>发布时间</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>9月21日感染性腹泻发病：123人次</td>
                            <td>2018-11-05</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>9月20日流行性感冒：57人次</td>
                            <td>2018-11-03</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>9月19日:手足口病发病同比增长220%</td>
                            <td>2018-11-01</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>9月18日登革热死亡:2人</td>
                            <td>2018-10-29</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>9月17日流行性感冒：157人次</td>
                            <td>2018-10-27</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>9月15日全区传染病发病人数较低</td>
                            <td>2018-10-25</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>9月14日流行性感冒：157人次</td>
                            <td>2018-10-23</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>9月13日全区传染病发病人数较低</td>
                            <td>2018-10-21</td>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>9月12日流行性感冒：157人次</td>
                            <td>2018-10-20</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="con right" style="width:50%;">
    <div class="div_any">
        <div class="left div_any01" style="width:100%;">
            <div class="div_any_child" style="width:98%;position:relative;height: 420px;">
                <div class="div_any_title"><img src="../images/title_17.png">主要疾病排行</div>
                <div id="histogramChart3"
                     style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
                <div id="lineChart2" style="width: 52%;height: 90%;display: inline-block;"></div>
            </div>
        </div>
        <div class="left div_any01" style="width:48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_18.png">年龄分布</div>
                <p id="pieChart1" class="p_chart" style="height: 400px;"></p>
            </div>
        </div>
        <div class="right div_any01" style="width:48%;">
            <div class="div_any_child" style="height: 420px;">
                <div class="div_any_title"><img src="../images/title_19.png">性别分布</div>
                <p id="pieChart2" class="p_chart" style="height: 400px;"></p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
